<template>
    <div class="student-home">
        <section class="results-section">
            <h3>我的借阅记录</h3>

            <!-- 显示借阅记录 -->
            <el-row gutter="20">
                <el-col v-for="(record, index) in borrowRecords" :key="index" :span="5">
                    <el-card shadow="hover" class="result-card">
                        <template #header>
                            <div class="card-header">
                                <div class="card-header">
                                    <span style="margin-right: 10px;">{{ record.journal_name }}</span>
                                    <el-button v-if="record.status === 'locked'" type="danger" size="small"
                                        @click="cancelBorrow(record.borrow_id)" style="margin-left: auto;">
                                        取消借阅
                                    </el-button>
                                </div>
                                <el-tag :type="statusMap[record.status].type" disable-transitions>
                                    {{ statusMap[record.status].label }}
                                </el-tag>
                            </div>
                        </template>

                        <div class="entrustment-info">
                            <p><strong>期号:</strong> {{ record.issue }}</p>
                            <p><strong>卷号:</strong> {{ record.volume }}</p>
                            <p><strong>出版年:</strong> {{ record.year }}</p>
                            <p><strong>借阅日期:</strong> {{ record.borrow_date }}</p>
                            <p><strong>归还日期:</strong> {{ record.return_date }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </section>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { borrowApi } from '@/request/apiService'; // 引入借阅API

// 状态映射，包含标签和类型
const statusMap = {
    pending: { label: '待处理', type: 'warning' },
    locked: { label: '已锁定', type: 'info' },
    borrowed: { label: '已借阅', type: 'primary' },
    returned: { label: '已归还', type: 'success' },
    cancelled: { label: '已取消', type: 'danger' },
};

// 存储借阅记录
const borrowRecords = ref([]);

// 获取借阅记录
const fetchBorrowRecords = async () => {
    const { data } = await borrowApi.getBorrowList({
        page: 1,
        pageSize: 999999, // 可调整分页
    });
    borrowRecords.value = data;
};

// 取消借阅操作
const cancelBorrow = async (borrow_id) => {
    await borrowApi.updateBorrowStatus({
        borrow_id,
        status: 'cancelled',
    });
    fetchBorrowRecords();
};

// 初始化加载借阅记录
onMounted(fetchBorrowRecords);
</script>

<style scoped>
.student-home {
    font-family: Arial, sans-serif;
}

.results-section {
    margin-top: 20px;
}

.result-card {
    margin-bottom: 15px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.entrustment-info {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

.entrustment-info p {
    margin: 5px 0;
}

.entrustment-info strong {
    color: #333;
}
</style>
